<template>
  <div style="height:90%;width:100%;">
    <div class="ldIncome" style="height:100%;width:100%;"></div>
  </div>
</template>

 <script>
export default {
  name: "ldIncome",
  props: {
    ldIncomeEchart: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch:{
    ldIncomeEchart(val){
     this.getPie(val);
    }
  },
  // mounted(){
  //   this.getPie()
  // },
  methods: {
    getPie(val){
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".ldIncome"));
      let option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                },
                // formatter: function (params) {
                //     var tar;
                //     if (params[1].value !== '-') {
                //         tar = params[1];
                //     }
                //     else {
                //         tar = params[0];
                //     }
                //     return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                // }
            },
            // legend: {
            //     data: ['支出', '收入']
            // },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '20px',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                splitLine: {show: false},
                axisLabel: {
                  interval:0,
                  rotate:-90 ,
                  },
                data: val.xAxis,
                // axisLabel: {
                //     show:false
                // },
                axisTick:{ //y轴刻度线
                    show:true,
                    // formatter: function (params) {
                    //   console.log(params)
                    //    if(params.dataIndex == 0 || params.dataIndex == 17){

                    //    }
                    // },
                    length:100
                },
                // axisLine:{ //y轴
                //     show:false
                // },
            },
            yAxis: {
                type: 'value',
               splitLine:{
                   show:false,
               },
               axisLabel: {
                   show:false
               },
               axisTick:{ //y轴刻度线
                   show:false
               },
               axisLine:{ //y轴
                   show:false
               },
            },
            series: [
                {
                    name: '增量收入',
                    type: 'bar',
                    stack: '增量收入',
                    itemStyle:{
                    normal:{
                      color: function(params) {
                           var c="";
                           // var index =val.xAxis.indexOf("浙江分公司");
                           if(params.dataIndex == 0 || params.dataIndex == 17){
                             c='#5585bf'
                           }else{
                             if(params.data>0){
                                 c='rgb(255,153,153)'
                             }else{
                                c='#c00000'
                             }
                           }
                            return c;
                            },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                               color: '#0070c0'
                             },
                              // formatter:"{c}%",
                         }
                    }
                },
                    // itemStyle: {
                    //     barBorderColor: '#c00000',
                    //     color: '#c00000'
                    // },

                    data: val.yAxis
                },

            ]
        };

      myChart.setOption(option);
    }
  },
};
 </script>

 <style>
 </style>
